//
//  VipView.swift
//  Chatup
//
//  Created by op on 2023/10/17.
//

import SwiftUI

struct CellView: View {
    let icon: String
    let text: String
    
    var body: some View {
        HStack {
            Image(icon)
                .resizable()
                .frame(width: 18, height: 18)
            Text(text)
                .font(.system(size: 12))
                .foregroundColor(.white.opacity(0.45))
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .cornerRadius(10)
    }
}

struct TextWithResizableBackground: View {
    var text: String
    var isWeekly: Bool
    var weeklyPrice : String?
    
    var body: some View {
        VStack {
//            Spacer().frame(height: 16)
            Text(text)
                .font(.system(size: 12,weight: .bold))
                .padding(.horizontal,10)
                .padding(.vertical,6)
                .background(
                    RoundedRectangle(cornerRadius: 20)
                        .fill(isWeekly ? Color(red: 0.98, green: 0.47, blue: 0.31).opacity(0.1) : Color(red: 0.15, green: 0.75, blue: 0.46).opacity(0.1))
    //                    .overlay(RoundedRectangle(cornerRadius: 20)
    //                        .stroke(Color.green, lineWidth: 2)
    //                    )
                )
                .foregroundColor(isWeekly ? Color(red: 0.92, green: 0.52, blue: 0.23) : Color(red: 0.15, green: 0.75, blue: 0.46))
            if !isWeekly{
                Spacer().frame(height: 4)
                Text((weeklyPrice ?? "--"))
                    .font(.system(size: 12))
                    .padding(.horizontal, 10)
        
                    .foregroundColor(Color(red: 0.15, green: 0.75, blue: 0.46))
            }
//            Spacer().frame(height: 16)
        }
    }
}

struct RoundedRectangleView: View {
    @Binding var isSelected: Bool
    @Binding var model: VipItemModel?
    let color: Color

    var body: some View {
        GeometryReader { proxy in
            HStack {
                VStack(alignment: .leading) {
                    Text(model?.title ?? "----")
                        .font(.system(size: 14))
                        .foregroundColor(.white.opacity(0.5))
                    Spacer().frame(height: 2)
                    Text(model?.price ?? "-------")
                        .font(.system(size: 14, weight: .bold))
                        .foregroundColor(.white)
                }
                Spacer()
                TextWithResizableBackground(text: model?.freeTrialDes ?? "--", isWeekly: model?.isFreeTrial ?? false ,weeklyPrice: model?.weekPrice)
                Image(isSelected ? "icon_vip_check" : "icon_vip_uncheck")
            }
//            .frame(width: proxy.size.width - 20, height: 74)
            .overlay {
                RoundedRectangle(cornerRadius: 14)
                    .stroke(isSelected ? Color(red: 0.15, green: 0.75, blue: 0.46) : .white.opacity(0.4), lineWidth: 1)
                    .frame(width: proxy.size.width, height: 74)
            }
            .padding()
        }
    }
}

struct VipView: View {
    @StateObject var viewModel: VipViewModel
    @State private var chooseWeeky = true
    @State private var chooseYearly = false
    @Environment(\.presentationMode) var prensentModel
    @State var text = "Get Now"
    let items = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16),
    ]
    
    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .topLeading) {
                VStack {
                    Image("bg_vip_big")
                        .resizable()
                        .scaledToFit()
                        .frame(width: proxy.size.width)
                    Spacer()
                    LazyVGrid(columns: items, spacing: 16) {
                        ForEach(viewModel.guideItems.indices, id: \.self) { index in
                            CellView(icon: viewModel.guideItems[index].icon, text: viewModel.guideItems[index].name)
                        }
                    }
                    .padding()
//                    Spacer()
//                        .frame(height: 27)
                    
                    let first = Binding<VipItemModel?>(get: { viewModel.produceInfo.first }, set: {_ in})
                    
                    RoundedRectangleView(isSelected: $chooseYearly, model: first, color: .blue)
                        .frame(width: proxy.size.width - 20, height: 74)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            chooseYearly = true
                            chooseWeeky = false
                            viewModel.chooseIndex = 0
                            viewModel.logSwitchPage()
                        }
                    Spacer()
                        .frame(height: 14)
                    let last = Binding<VipItemModel?>(get: { viewModel.produceInfo.last }, set: {_ in})
                    RoundedRectangleView(isSelected: $chooseWeeky, model: last, color: .gray)
                        .frame(width: proxy.size.width - 20, height: 74)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            chooseYearly = false
                            chooseWeeky = true
                            viewModel.chooseIndex = 1
                            viewModel.logSwitchPage()
                        }
                    Spacer()
                        .frame(height: 30)
                    
//                    ZStack {
//                        Rectangle()
//                            .foregroundColor(.clear)
//                            .background(Color(red: 0.15, green: 0.75, blue: 0.46))
//                            .cornerRadius(12)
//                        Text(viewModel.chooseIndex == 1 ? "Start 3-day Trial" : "Get Now")
//                            .font(.system(size: 18,weight: .bold))
//                            .foregroundColor(.white)
//                    }
//                    .frame(width: proxy.size.width - 20, height: 64)
//                    .onTapGesture {
//                        viewModel.startPay()
//                    }
                    
                    Button {
                        viewModel.startPay()
                    } label: {
                        ZStack {
                            Rectangle()
                                .foregroundColor(.clear)
                                .background(Color(red: 0.15, green: 0.75, blue: 0.46))
                                .cornerRadius(12)
                            Text(viewModel.chooseIndex == 1 ? String.i18nText("subs_try_for_free") : String.i18nText("subs_get_the_deal"))
                                .font(.system(size: 18, weight: .bold))
                                .foregroundColor(.white)
                        }
                    }
                    .frame(width: proxy.size.width - 20, height: 64)

                    Spacer()
                        .frame(height: 14)
                    HStack {
                        Image("icon_vip_seca")
                        Text(String.i18nText("subs_security"))
                            .font(.system(size: 14))
                            .foregroundColor(.white.opacity(0.5))
                    }
                    Spacer()
                        .frame(height: 27)
                    
                    HStack {
                        Button {
                            viewModel.termClick()
                        } label: {
                            Text(String.i18nText("terms_of_use"))
                                .font(.system(size: 14))
                                .foregroundColor(Color(red: 0.3, green: 0.47, blue: 0.67))
                        }
                        Button {
                            viewModel.privacyClick()
                        } label: {
                            Text(String.i18nText("privacy_policy"))
                                .font(.system(size: 14))
                                .foregroundColor(Color(red: 0.3, green: 0.47, blue: 0.67))
                        }
                        Button {
                            viewModel.restoreClick()
                        } label: {
                            Text(String.i18nText("subs_restore"))
                                .font(.system(size: 14))
                                .foregroundColor(Color(red: 0.3, green: 0.47, blue: 0.67))
                        }
                    }
                    Spacer()
                }
                .background(
                    LinearGradient(
                        stops: [
                            Gradient.Stop(color: Color(red: 0.05, green: 0.31, blue: 0.33), location: 0.00),
                            Gradient.Stop(color: Color(red: 0.02, green: 0.12, blue: 0.11), location: 1.00),
                        ],
                        startPoint: UnitPoint(x: 0.48, y: -0.05),
                        endPoint: UnitPoint(x: 0.5, y: 1)
                    )
                )
                .ignoresSafeArea()
                
                HStack(){
                    Button(action: { prensentModel.wrappedValue.dismiss() }, label: {
                        Image("icon_close_green")
                    })
                    Spacer()
                    Text(String.i18nText("subs_get_assistant"))
                        .font(.system(size: 20, weight: .bold))
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity, alignment: .center)
                        .lineLimit(1)
                    Spacer()
                    Button(action: {}, label: {
                        Image("icon_close")
                    })
                        .opacity(0)
                }
                .padding(.horizontal)
                .padding(.vertical, 8)
                if viewModel.isLoading {
                    Color.black.opacity(0.5)
                        .ignoresSafeArea()
                        .onTapGesture {
//                            viewModel.isLoading = false
                        }
                    ZStack(alignment: .center) {
                        Rectangle()
                            .frame(width: 100, height: 100)
                            .foregroundColor(.black)
                            .cornerRadius(12)
                        ProgressView(viewModel.toastStr)
                            .progressViewStyle(CircularProgressViewStyle())
                    }
                    .frame(width: proxy.size.width, height: proxy.size.height)
                }
            }
            .onChange(of: viewModel.closeVip, perform: { _ in
                prensentModel.wrappedValue.dismiss()
            })
        }
    }
}

#Preview {
    VipView(viewModel: .init(from: ""))
}
